// 转料等操作的选择任务单组件组件,注意要用反引号
Vue.component('indent-select', {
    template: `<div> 
            <el-form-item label="目标任务单编号" prop="render.indentId" required class="indent-code">
                <el-popover placement="right" trigger="click" v-model="indentPopover">
                    <div style="margin-bottom: 5px">
                        <el-select v-model="dialogSearch.proType" placeholder="供应状态" size="mini">
                            <el-option v-for="item in proTypeList"
                                       :key="item.code"
                                       :label="item.desc"
                                       :value="item.code">
                            </el-option>
                        </el-select>
                        <el-input v-model="dialogSearch.searchVal" placeholder="搜索信息" clearable size="mini"></el-input>
                        <el-button type="success" icon="el-icon-search" @click="loadIndentList" size="mini">查询</el-button>
                    </div>
                    <el-table :data="indentList" max-height="250" border row-class-name="indent-table-row"
                              v-loading="dialogSearch.loading"
                              highlight-current-row @current-change="((item) => {indentChange(item)})"
                              style="width: 1200px">
                        <el-table-column width="210" property="code" label="任务单编号"></el-table-column>
                        <el-table-column width="210" property="conCode" label="合同编号"></el-table-column>
                        <el-table-column width="300" property="conName" label="工程名称"
                                         show-overflow-tooltip></el-table-column>
                        <el-table-column width="300" property="clientName" label="客户名称"
                                         show-overflow-tooltip></el-table-column>
                        <el-table-column width="300" property="site" label="施工部位"
                                         show-overflow-tooltip></el-table-column>
                        <el-table-column width="150" property="strengthName" label="强度等级"></el-table-column>
                        <el-table-column width="150" property="castModelName" label="浇筑方式"></el-table-column>
                    </el-table>
                    <el-input slot="reference" v-model="indentCode" readonly placeholder="点击选择任务单" :disabled="canEdit"></el-input>
                </el-popover>
            </el-form-item>
            <el-form-item label="施工部位" class="dialog-indent-site">
                <el-input v-model="formExhibition.site" readonly></el-input>
            </el-form-item>
            <el-form-item label="合同名称">
                <el-input v-model="formExhibition.conName" readonly></el-input>
            </el-form-item>
            <el-form-item label="客户名称">
                <el-input v-model="formExhibition.clientName" readonly></el-input>
            </el-form-item>
            <el-form-item label="施工单位">
                <el-input v-model="formExhibition.builder" readonly></el-input>
            </el-form-item>
            <el-form-item label="施工部位">
                <el-input v-model="formExhibition.site" readonly></el-input>
            </el-form-item>
            <br>
            <el-form-item label="强度等级">
                <el-input v-model="formExhibition.strengthName" readonly></el-input>
            </el-form-item>
            <el-form-item label="塌落度">
                <el-input v-model="formExhibition.slumps" readonly></el-input>
            </el-form-item>
            <el-form-item label="特性要求">
                <el-input v-model="formExhibition.tech" readonly></el-input>
            </el-form-item>
            <el-form-item label="浇筑方式">
                <el-input v-model="formExhibition.castModelName" readonly></el-input>
            </el-form-item>
           </div>
      `,
    props: {
        //  任务单供应状态
        proType: null,
        //  任务id,当存在任务单id时,加载任务单
        indentId: null,
        //  是否可以修改
        canEdit: null,
    },
    data() {
        return {
            indentPopover: false,
            //  任务单列表
            indentList: [],
            //  任务单搜索框
            dialogSearch: {
                conName: null,
                site: null,
                loading: null,
                indentCode: null,
                proType: null,
                levelName: null,
            },
            //  任务单id
            indentId: null,
            indentCode: null,
            //  泵送设备数据
            pumpDeviceId: null,
            //  展示数据
            formExhibition: {},
            //  任务单供应状态
            proTypeList: [
                {code: 0, desc: "待供"},
                {code: 1, desc: "正供"},
                {code: 2, desc: "供毕"},
                {code: 3, desc: "暂供"},
            ]
        };
    },
    created() {
        let that = this;
        that.formExhibition = {};
        that.indentCode = null;
        that.dialogSearch.proType = that.proType;
        // that.loadIndentList();
        let indentId = that.indentId;
        if (indentId != null) {
            //  加载任务单
            that.loadIndentDetail();
        }
    },
    mounted() {
        let that = this;
    },
    methods: {
        loadIndentDetail() {
            let that = this;
            $.ajax({
                type: "POST",
                url: "/pro/indent/detail/" + that.indentId,
                async: true,
                dataType: 'json',
                success: function (res) {
                    if (res.code == 0) {
                        let indent = res.data;
                        that.formExhibition = {
                            conName: indent.conName,
                            clientName: indent.clientName,
                            builder: indent.builder,
                            site: indent.site,
                            strengthName: indent.strengthName,
                            slumps: indent.slumps,
                            tech: indent.tech,
                            castModelName: indent.castModelName,
                        };
                        that.indentCode = indent.code;
                    } else {
                        that.$message({
                            showClose: true,
                            message: '查询任务单失败：' + res.msg,
                            type: 'error'
                        });
                    }
                },
                error: function (res) {
                    that.$message({
                        showClose: true,
                        message: '请求失败，请联系管理员',
                        type: 'error'
                    });
                    return;
                },
                complete: function (XMLHttpRequest, status) {
                }
            })
        },
        //  加载任务单列表
        loadIndentList() {
            let that = this;
            $.ajax({
                type: "POST",
                url: "/pro/indent/list",
                async: true,
                dataType: 'json',
                data: {
                    //  只查询正供列表
                    //  proType: 1,
                    searchVal: that.dialogSearch.searchVal,
                    proType: that.dialogSearch.proType,
                },
                success: function (res) {
                    if (res.code == 0) {
                        that.indentList = res.data;
                    } else {
                        that.$message({
                            showClose: true,
                            message: '查询任务单失败：' + res.msg,
                            type: 'error'
                        });
                    }
                },
                error: function (res) {
                    that.$message({
                        showClose: true,
                        message: '请求失败，请联系管理员',
                        type: 'error'
                    });
                    return;
                },
                complete: function (XMLHttpRequest, status) {
                }
            })
        },
        //  任务单变动
        indentChange(item) {
            let that = this;
            if (isNull(item)) {
                return;
            }
            /*that.indentId = item.id;
            that.pumpDeviceId = null;*/
            that.formExhibition = {
                conName: item.conName,
                clientName: item.clientName,
                builder: item.builder,
                site: item.site,
                strengthName: item.strengthName,
                slumps: item.slumps,
                tech: item.tech,
                castModelName: item.castModelName,
            };
            that.indentCode = item.code;
            //  加载任务单泵送设备
            // that.loadIndentPumpDevs(-1);
            that.indentPopover = false;
            //  设置父类参数
            this.$emit("change", item.id)
        },
        /**
         * 加载泵送设备
         */
        loadIndentPumpDevs(deviceId) {
            let that = this;
            let indentId = that.indentId
            $.ajax({
                type: "POST",
                url: "/pro/indent/pump-dev-list",
                async: true,
                dataType: 'json',
                data: {
                    indentId: indentId,
                },
                success: function (res) {
                    if (res.code == 0) {
                        that.indentPumpDevs = res.data;
                        if (deviceId == -1) {
                            //  默认
                            if (that.indentPumpDevs.length > 0) {
                                that.pumpDeviceId = that.indentPumpDevs[0].id;
                            }
                        } else {
                            that.pumpDeviceId = deviceId;
                        }
                    } else {
                        that.$message({
                            showClose: true,
                            message: "查询泵送设备失败" + res.msg,
                            type: 'error'
                        });
                    }
                },
                error: function (res) {
                    that.$message({
                        showClose: true,
                        message: '请求失败，请联系管理员',
                        type: 'error'
                    });
                    return;
                },
                complete: function (XMLHttpRequest, status) {
                }
            });
        },
    }
});

// 创建 Vue 实例
new Vue({
    el: '#app',
    data() {
        return {};
    }
});
